import FcPlainText from "@src/components/FcPlainText";
import ShareLink from "@src/components/ShareLink";
import {
  BootstrapIcon,
  FcFormControl,
  FcFormItem,
  FcInput,
  FcTextarea,
  FormControl,
  FormField,
} from "solid-fire-controls";
import { Component } from "solid-js";

export interface PackageFormPartProps {
  readonly?: boolean;
}

const PackageFormPart: Component<PackageFormPartProps> = (props) => {
  return (
    <>
      {/* <FcFormItem name={"iconUrl"} label={" "}>
        <FcFormControl
          control={"img"}
          controlValuePropName="src"
          controlProps={{ height: "24px" }}
        ></FcFormControl>
      </FcFormItem>
      <FcFormItem
        name={"title"}
        label={"Title"}
        control={FcInput}
        controlProps={{ readonlyPlainText: props.readonly }}
      ></FcFormItem> */}

      <FcFormItem label="Identity" name={"identity"}>
        <table class="table w-100 table-sm table-bordered">
          <tbody>
            <tr>
              <td>Id</td>
              <td>
                <FormField name={"id"}>
                  <FormControl control={FcPlainText}></FormControl>
                </FormField>
              </td>
            </tr>
            <FormField name={"version"}>
              <tr>
                <td>Version</td>
                <td>
                  <FormField
                    name={"version"}
                    control={FcPlainText}
                  ></FormField>
                </td>
              </tr>
            </FormField>
          </tbody>
        </table>
      </FcFormItem>
      <FcFormItem
        name={"tags"}
        label={"Tags"}
        control={FcInput}
        controlProps={{ readonlyPlainText: props.readonly }}
      ></FcFormItem>
      <FcFormItem
        label={"Authors"}
        name={"authors"}
        control={FcInput}
        controlProps={{ readonlyPlainText: props.readonly }}
      ></FcFormItem>
      <FcFormItem
        label={"Summary"}
        name={"summary"}
        control={FcTextarea}
        controlProps={{ readonlyPlainText: props.readonly }}
      ></FcFormItem>
      <FcFormItem name={"licenseUrl"} label="License">
        <div>
          <FcFormControl
            control={ShareLink}
            controlProps={{
              classList: {
                "ms-1": true,
              },
            }}
          ></FcFormControl>
        </div>
      </FcFormItem>
      <FcFormItem name={"projectUrl"} label="Project">
        <div>
          <FcFormControl
            control={ShareLink}
            controlProps={{
              classList: {
                "ms-1": true,
              },
            }}
          ></FcFormControl>
        </div>
      </FcFormItem>
      <FcFormItem
        name={"downloadCount"}
        label="Download Count"
        control={FcInput}
      ></FcFormItem>
    </>
  );
};

export default PackageFormPart;
